<!--
 * @Author: hgy
 * @Date: 2022-10-12 10:57:24
 * @LastEditTime: 2022-10-14 15:23:05
 * @LastEditors: hgy
 * @Description:
 * @FilePath: \jep-training-trinity-group\briup-ui\src\pages\admin\order\List.vue
 * 别乱动！
-->
<template>
  <div>
    <!-- 头部导航栏 -->
    <div class="header">
      <!-- <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item index="1" @click="all()">所有订单</el-menu-item>
        <el-menu-item index="2" @click="navigation('待支付')"
          >待支付</el-menu-item
        >
        <el-menu-item index="3" @click="navigation('待派单')"
          >待派单</el-menu-item
        >
        <el-menu-item index="4" @click="navigation('待接单')"
          >待接单</el-menu-item
        >
        <el-menu-item index="5" @click="navigation('待服务')"
          >待服务</el-menu-item
        >
        <el-menu-item index="6" @click="navigation('待确认')"
          >待确认</el-menu-item
        >
        <el-menu-item index="7" @click="navigation('已完成')"
          >已完成</el-menu-item
        >
      </el-menu> -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="所有订单" />
        <el-tab-pane label="待支付" name="待支付" />
        <el-tab-pane label="待派单" name="待派单" />
        <el-tab-pane label="待服务" name="待服务" />
        <el-tab-pane label="待确认" name="待确认" />
        <el-tab-pane label="已完成" name="已完成" />
      </el-tabs>
    </div>
    <!-- 表格内容 -->
    <div class="table">
      <el-table :data="orderList.list" style="width: 100%">
        <el-table-column prop="id" label="订单编号" align="center" />
        <el-table-column prop="orderTime" label="下单时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.orderTime | fmtDate }}
          </template>
        </el-table-column>
        <el-table-column prop="total" label="总价" align="center">
          <template slot-scope="scope">
            ￥
            <span>{{ scope.row.total }}</span>
            元
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === '待接单'"
              type="success"
            >待接单</el-tag>
            <el-tag
              v-if="scope.row.status === '待派单'"
              type="info"
            >待派单</el-tag>
            <el-tag
              v-if="scope.row.status === '待服务'"
              type="danger"
            >待服务</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="customerId" label="顾客ID" align="center" />
        <el-table-column
          v-if="params.status !== '待支付' && params.status !== '待派单'"
          prop="employeeId"
          label="员工ID"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.employeeId || "--" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="details(scope.row)"
            >详情</el-button>
            <el-button
              v-show="scope.row.status === '待派单'"
              type="success"
              @click="pd(scope.row.id)"
            >派单</el-button>
            <el-button
              v-show="scope.row.status === '待接单'"
              type="danger"
              @click="npd(scope.row.id)"
            >取消派单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderList.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 派单模态框 -->
    <el-dialog
      title="选择员工派单"
      :visible.sync="visible"
      align="center"
      @close="toClose"
    >
      <el-table :data="gridData">
        <el-table-column
          property="id"
          label="ID"
          width="200"
          align="center"
        />
        <el-table-column label="姓名" width="200" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.realname || scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="选择" width="200" align="center">
          <template slot-scope="scope">
            <div>
              <el-radio
                v-model="form.waiterId"
                :label="scope.row.id"
              >点击选择</el-radio>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toSendOrder">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { sendOrder, cancelSendOrder } from '@/api/order'
import { get } from '@/utils/request'
export default {
  data() {
    return {
      activeName: '所有订单',
      // 派单需要的参数
      form: {},
      // 员工名单
      gridData: [],
      visible: false,
      // activeIndex: "1",
      params: {
        page: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    // 直接当做普通属性调用不加括号
    // 任何data中数据变化立即重新计算
    // 计算属性会缓存
    ...mapState('order', ['orderList'])
  },

  created() {
    this.$store.dispatch('order/getOrders', this.params)
  },
  methods: {
    // 顶部标签切换
    handleClick() {
      if (this.activeName === '所有订单') {
        this.params.page = 1
        delete this.params.status
        this.$store.dispatch('order/getOrders', this.params)
      } else {
        this.params.page = 1
        this.params.status = this.activeName
        // console.log(this.params);
        this.$store.dispatch('order/getOrders', this.params)
      }
    },
    // handleSelect(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    // all() {
    //   this.params.page = 1;
    //   delete this.params.status;
    //   this.$store.dispatch("order/getOrders", this.params);
    // },
    // navigation(status) {
    //   this.params.page = 1;
    //   this.params.status = status;
    //   // console.log(this.params);
    //   this.$store.dispatch("order/getOrders", this.params);
    // },

    handleSizeChange(pageSize) {
      this.params.page = 1
      this.params.pageSize = pageSize
      this.$store.dispatch('order/getOrders', this.params)
    },
    handleCurrentChange(page) {
      this.params.page = page
      this.$store.dispatch('order/getOrders', this.params)
    },
    // 取消派单
    npd(orderId) {
      this.$confirm('此操作将改变订单状态,是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await cancelSendOrder({ orderId })
          this.$message({
            type: 'info',
            message: res.message
          })

          this.$store.dispatch('order/getOrders', this.params)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作！'
          })
        })
    },
    // 派单模态框
    async pd(orderId) {
      this.visible = true
      this.form.orderId = orderId
      const res = await get('/baseUser/pageQuery', {
        page: 1,
        pageSize: 100,
        roleId: 1
      })
      // console.log(this.form, "派单参数");
      this.gridData = res.data.list
      // console.log(res);
    },
    // 派单确定
    async toSendOrder() {
      if (!this.form.waiterId) {
        this.$notify({
          type: 'danger',
          message: '请选择员工！'
        })
      } else {
        // console.log(this.form, "派单参数22222222");
        const res = await sendOrder(this.form)
        // console.log(res);
        this.$notify({
          type: 'success',
          message: res.message
        })

        this.visible = false
      }
    },
    // 模态框关闭时
    toClose() {
      this.form = {}
      this.$store.dispatch('order/getOrders', this.params)
    },
    // 详情
    details(data) {
      this.$router.push({
        path: '/admin/order/Details',
        query: data
      })
    }
  }
}
</script>
<style lang="scss">
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
</style>
